import React, { Component , useState, useEffect } from 'react'
import * as echarts from 'echarts';
import ecStat from 'echarts-stat';
import { InboxOutlined } from '@ant-design/icons';
import axios from 'axios';
import {Modal, Spin,Button,Form,Upload,Input} from 'antd';

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
};
const antbtn = {
  width: '100%',
}

export default class Nightingale extends Component {    
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      isModalOpen: false,
      ChartTitle:'',
      file: null,
      DataList:[],
      styles :{
        backgroundImage: 'url(/img/Bar.png)',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center',
        backgroundSize: 'cover',
        width: '100%',
        height: '100vh'
      }
    };
    this.normFile = this.normFile.bind(this);
    this.onFinish = this.onFinish.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  showModal = () => {
    this.setState({
      isModalOpen: true,
    });
  };
  handleOk = () => {
    this.setState({
      isModalOpen: false,
    });
  };
  handleCancel = () => {
    this.setState({
      isModalOpen: false,
    });
  };
  handleChange = (e) => {
    this.setState({
      ChartTitle: e.target.value,
    });
  }
  normFile = (e) => {
    console.log('Upload event:', e);
    const File = e.file;
    this.setState({ file: File });
  }
  onFinish = (values) => {
    this.setState({
      isModalOpen: false,
    });
    this.initChart();
  }
    initChart = () => {
      const {ChartTitle ,DataList} = this.state;
        var chartDom = document.getElementById('NightingaleChart');
        this.myChart = echarts.init(chartDom);
        echarts.registerTransform(ecStat.transform.histogram);
        fetch('./example/example-pie.xlsx')
            .then(response => response.text())
            .then(text => {
                const rows = text.split('\n');
                rows.forEach(row => {
                  const [name, value] = row.split('\t');
                  const node = { 
                    name:name, 
                    value: value 
                  };
                  this.setState({
                    DataList: [...this.state.DataList, node]
                  });
                });
                this.state.DataList.shift();
                var option = {
                  title: {
                    text: ChartTitle,
                    left: 'center'
                  },
                  legend: {
                    orient: 'vertical',
                    left: 'left'
                  },
                  tooltip: {
                    trigger: 'item'
                  },
                
                  series: [
                    {
                      type: 'pie',
                      radius: [50, 250],
                      center: ['50%', '50%'],
                      roseType: 'area',
                      itemStyle: {
                        borderRadius: 8
                      },
                      data: DataList
                    }
                  ]
                };
                this.myChart.setOption(option);
              });
    }
    chartReseize = () => {
        this.myChart && this.myChart.resize()
    }
    componentDidMount() {
        this.initChart()
    }
    render() {
      const { isModalOpen ,loading } = this.state;
        return (
          <>
          <Button style={antbtn} onClick={() => this.showModal()} className='antbtn'>Open Modal</Button>
          <Modal title="Basic Modal" open={isModalOpen} onOk={() =>this.handleOk()} onCancel={() =>this.handleCancel()} 
          cancelButtonProps={{ style: { display: "none" } }} // 隐藏取消按钮
          okButtonProps={{ style: { display: "none" } }} // 隐藏确认按钮
          >
          <Spin spinning={loading}>  
          <Form onSubmit={this.handleSubmit}
                name="validate_other"
                {...formItemLayout}
                onFinish={this.onFinish}
                style={{
                  maxWidth: 600,
                }}
              >
                <Form.Item label="Title">
                  <Input placeholder="Please Input Title" value={this.state.value} onChange={this.handleChange} />
                </Form.Item>
                <Form.Item label="Dragger">
                  <Form.Item name="dragger" multiple={false} valuePropName="file" getValueFromEvent={this.normFile} noStyle>
                   <Upload.Dragger name="files"  action="/upload.do" >
                      <p className="ant-upload-drag-icon">
                        <InboxOutlined />
                      </p>
                      <p className="ant-upload-text">Click or drag file to this area to upload</p>
                    </Upload.Dragger>
                    </Form.Item>
                  </Form.Item>
                  <Form.Item label="Example File">
                  <Button type="text" onClick={()=> this.getExampleFile()} danger>Example File</Button>
                  </Form.Item>
                <Form.Item
                  wrapperCol={{
                    span: 12,
                    offset: 6,
                  }}
                >
                  <Button type="primary" htmlType="submit" >
                    Submit
                  </Button>
                </Form.Item>
            </Form></Spin>
          </Modal>
            <div className='w100 h100' id='NightingaleChart'></div>
        </>
        )
    }
}
